{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta name="baidu-site-verification" content="WmM9Nymwhq" />
    <link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    {% block mycss %}
    {% endblock %}

    <title>
        {% block title %}
            西湖歌舞几时休
        {% endblock %}
    </title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="origin">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    {% block meta %}
    {% endblock %}

    <link id="baseCss" rel="stylesheet" />
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/base.css' }}"  rel="stylesheet">
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/index.css' }}" rel="stylesheet">

    <script src="{% static 'js/modernizr.js' %}"></script>
    <script src="{% static 'js/scrollReveal.js' %}"></script>
    <script src="{% static 'js/article/request-image.js' %}"></script>
    <script src="{% static 'js/map/echarts.min.js' %}"></script>
    <script src="{% static 'js/map/china.js' %}"></script>

    <SCRIPT>
        function getWidth() {
            var winWidth;
            if(window.innerWidth) {
                winWidth = window.innerWidth;
            } else if((document.body) && (document.body.clientWidth)) {
                winWidth = document.body.clientWidth;
            }
            return winWidth;
        }

        /*var h_screenWidth = getWidth();
        if (h_screenWidth > 1500) {
            baseCSS = "base-default.css";
        } else {
            baseCSS = "base-min.css";
        }
        document.getElementById("baseCss").href = "static/css-theme/white/" + baseCSS;*/
    </SCRIPT>
</head>
<body>
<header>
    <script type="text/javascript">
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires=" + d.toGMTString();
            if (exdays > 0) {
                document.cookie = cname + "=" + cvalue + "; " + expires;
            } else {
                document.cookie = cname + "=" + cvalue;
            }
        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) === 0) {
                    return c.substring(name.length,c.length);
                }
            }
            return "";
        }

        function getAddress() {
            var ip = returnCitySN.cip; //客户端ip
            $.getJSON("https://api.map.baidu.com/location/ip?callback=?", {
                'ak': 'x2CC5dtMtwjAAe6epLt2s1Kxs0BmSxPu',
                'coor': 'bd09ll',
                'ip': ip
            }, function(data) {
                var x = data.content.point.x;//经度
                var y = data.content.point.y;//纬度
                var address = data.content.address;//所在市
                req = {}
                req["ip"] = ip;
                req["x"] = x;
                req["y"] = y;
                req["address"] = address;

                setVisit(req);
                setCookie("ip", req["ip"], 0);
                setCookie("address", req["address"], 0);
            });
        }

        function setVisit(req) {
            $.ajax({
            type:'GET',
            data: req,
            url:'{% url 'statistic:set' %}',
            datatype:JSON,
                success:function (data) {
                },
                    error:function () {
                }
            });
        }

        ip = getCookie("ip")
        if (ip === ""){
            getAddress();
        }

        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                y = e.pageY;
                $i.css({
                    "z-index": 9999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
            });
        });
    </script>

    <div class="logo" data-scroll-reveal="enter right over 1s">
        <a href="/" >
            愿你历尽千帆，归来仍是少年
        </a>
    </div>

    <nav class="topnav" data-scroll-reveal="enter bottom over 0.8s after 0.8s" style="margin-left: 25%;">
        <a href="{% url 'home:home' %}">
            <span>首页</span>
            <span class="en" style="color: #BC7A00">Home</span>
        </a>

        <a href="/aboutme/">
            <span>关于我</span>
            <span class="en" style="color: #BC7A00">About</span>
        </a>

        <a href="{% url 'articles:program:home' %}">
            <span>程序设计</span>
            <span class="en" style="color: #BC7A00">Program</span>
        </a>

        <a href="{% url 'articles:travel:home' %}">
            <span>旅行摄影</span>
            <span class="en" style="color: #BC7A00">Travel</span>
        </a>

        <a href="{% url 'articles:mindsay:home' %}">
            <span>碎言碎语</span>
            <span class="en" style="color: #BC7A00">Saying</span>
        </a>

        <a href="{% url 'document:list' %}">
            <span>文档资源</span>
            <span class="en" style="color: #BC7A00">Download</span>
        </a>

        <a href="{% url 'gbook:list' %}">
            <span>留言</span>
            <span class="en" style="color: #BC7A00">Saying</span>
        </a>

        <div class="search_div">
            <form method="get" action="/search/">
                {% if key_word %}
                    <input id="key_word" type="text" name="keyword" value={{ key_word }} />
                {% else %}
                    <input type="text" name="keyword" placeholder="搜索文章" />
                {% endif %}
                <button type="submit">Search</button>
            </form>
        </div>
    </nav>
</header>

<script>
    $(function(){
        $.ajax({
                type:'GET',
                url:'{% url 'statistic:get' %}',
                datatype:JSON,
                success:function (data) {
                    draw(data);
                },
                error:function () {
                    console.log('ajax刷新分页数据失败！');
                }
            });

        //初始化echarts实例
        function draw(data) {
            result = $.parseJSON(data);
            visitData = []
            for (i = 0; i < result.data.length; ++i) {
                visitData.push([result.data[i].x, result.data[i].y, result.data[i].count, result.data[i].city])
            }
            var optionMap = {
                /*visualMap: {
                    bottom: 50, left: 30, min: 0, max: 500, splitNumber: 5,
                    inRange: {color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()},
                    textStyle: {color: '#fff00'}
                },*/
                 tooltip: {
                     /*返回需要的信息*/
                     formatter: function (param) {
                         var value = param.value;
                         return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' +
                                    value[3] + '(' + value[2] + ')' +
                                '</div>';
                     }
                 },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {areaColor: '#ffffff', borderColor: 'rgba(66, 203, 232, 0.63)'},
                        emphasis: {areaColor: '#00ff'}
                    }
                },
                series: [{
                    type: 'scatter',
                    //symbolSize: 10,
                    coordinateSystem: 'geo',
                    /*data: convertData([
                    {name: "海门", value: 405},
                ])*/
                    data: visitData,//[[121.15, 31.89, 405]]
                    symbolSize: function (data) {
                        //return  data[2] * 1;
                        var size = new Array()
                        for (var i = 0; i <= 12; i++) {
                            size[i] = i;
                        }

                        var idx = parseInt(data[2] / 10 +1 );
                        if (idx > 12){
                            idx = 12;
                        }
                        
                        return size[idx];
                    },
                    itemStyle: { //基调颜色
                        normal: {
                            color: function (data) {
                                var idx = parseInt(data.data[2]);
                                idx = 130 - idx;
                                if (idx < 0) {
                                    idx = 0;
                                }

                                var delt = Number(idx).toString(16);
                                delt += "";
                                if (delt.length < 2) {
                                    delt += "0";
                                }
                                var color = "#FF" + delt + delt;
                                return color;
                            }
                        }
                    },
                }]
            };
            var myChart = echarts.init(document.getElementById('site-statistic'));
            myChart.setOption(optionMap);
        }
 });
</script>

<div id="main-container" class="container" style="width: 100%;">
    <div class="row">
        <div id="statistic-bar" class="col-xs-0 col-0 col-sm-0 col-md-0 col-lg-3">
            <div class="container" style="width: 100%;">
                <div class="row" style="text-align: center">
                    <div id="site-statistic" class="col-sm-12 col-md-12"></div>
                    <p>您是小站的第<span style="color: red"> {{ VISIT_COUNT }} </span>位访客，欢迎~</p>
                </div>
            </div>
        </div>
        <div id="article-bar" class="col-xs-12 col-12 col-sm-12 col-md-12 col-lg-6">
            <article>
                <div class="my-container" >
                    {% block content %}
                    {% endblock %}
                </div>
            </article>
        </div>
        <div id="calendar-bar" class="col-xs-0 col-0 col-sm-0 col-md-0 col-lg-3">
            <iframe name="" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" style="height:250px;margin: 10px" src="/calendar.html"></iframe>
        </div>
    </div>
</div>

<script>
    var screenWidth = getWidth();
    console.log("width=" + screenWidth);
    if (screenWidth > 1500) {
        document.getElementById("statistic-bar").setAttribute("class", "col-xs-0 col-0 col-sm-0 col-md-0 col-lg-3");
        document.getElementById("article-bar").setAttribute("class", "col-xs-12 col-12 col-sm-12 col-md-12 col-lg-6");
        document.getElementById("calendar-bar").setAttribute("class", "col-xs-0 col-0 col-sm-0 col-md-0 col-lg-3");
    } else if (screenWidth > 1280) {
        document.getElementById("statistic-bar").setAttribute("class", "col-xs-0 col-0 col-sm-0 col-md-0 col-lg-3");
        document.getElementById("article-bar").setAttribute("class", "col-xs-12 col-12 col-sm-12 col-md-12 col-lg-9");
        document.getElementById("calendar-bar").setAttribute("style", "display:none");
    } else {
        document.getElementById("statistic-bar").setAttribute("style", "display:none");
        document.getElementById("article-bar").setAttribute("class", "col-xs-12 col-12 col-sm-12 col-md-12 col-lg-12");
        document.getElementById("calendar-bar").setAttribute("style", "display:none");
    }
</script>

<div class="container footer_href" style="margin-top: 30px; color: #000000; font-size: 14px">
    <div class="row">
        <div class="col-sm-7 col-sm-offset-3 col-xs-10 col-xs-offset-1">
            <div class="row">
                <div class="col-sm-3 col-xs-3">
                    <h4>关于我</h4>
                    <ul style="margin: 0; padding: 0">
                        <li style="margin-top: 10px; list-style: none;"><a style="color: grey" href="https://github.com/meiqizhang" target="_blank">github</a></li>
                        <li style="margin-top: 5px; list-style: none;"><a style="color: grey" href="https://blog.csdn.net/zhangqi_gsts" target="_blank">csdn</a></li>
                    </ul>
                </div>
                <div class="col-sm-3 col-xs-3">
                    <h4>CDN资源库</h4>
                    <ul style="margin: 0; padding: 0">
                        <li style="margin-top:10px; list-style: none;"><a style="color: grey" href="" target="_blank">bootcdn</a></li>
                        <li style="margin-top:5px; list-style: none;"><a style="color: grey" href="" target="_blank">baiducdn</a></li>
                    </ul>
                </div>
                <div class="col-sm-3 col-xs-3">
                    <h4>常用教程</h4>
                    <ul style="margin: 0; padding: 0">
                        <li style="margin-top: 10px; list-style: none;"><a style="color: grey" href="" target="_blank">w3school</a></li>
                        <li style="margin-top: 5px; list-style: none;"><a style="color: grey" href="" target="_blank">菜鸟教程</a></li>
                    </ul>
                </div>
                <div class="col-sm-3 col-xs-3">
                    <h4>云服务器</h4>
                    <ul style="margin: 0; padding: 0">
                        <li style="margin-top: 10px; list-style: none;"><a style="color: grey" href="" target="_blank">阿里云</a></li>
                        <li style="margin-top: 5px; list-style: none;"><a style="color: grey" href="https://cloud.tencent.com/product/cvm" target="_blank">腾讯云</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<footer style="margin-top: 10px; margin-bottom: 10px">
    <span style="color: grey">
        <a style="color: grey" href="http://beian.miit.gov.cn">粤ICP备20054363号</a> | 博客已运行<span class="run_time"></span>
    </span>
</footer>

<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        (function () {
            window.scrollReveal = new scrollReveal({reset: true});
        })();
    }
    $(function(){
        var start_time = 0;
        $.ajax({
            type:'GET',
            url: '/starttime/',
            datatype:JSON,
            async: false,
            success:function (timestamp) {
                start_time = timestamp;
                update_run_time();
            },
            error:function () {
                console.log('ajax刷新分页数据失败！');
            }
        })

        function update_run_time() {
            var startDate = parseInt(start_time);
            var endDate = parseInt(Date.parse(new Date()) / 1000);

            var seconds = endDate - startDate;
            var years = parseInt(seconds / (24 * 3600 * 356));
            if (years > 0){
                seconds = parseInt(seconds % (years * 24 * 3600 * 356));
            } else {
                years = 0;
            }

            var days = parseInt(seconds / (24 * 3600));
            if (days > 0) {
                seconds = parseInt(seconds % (days * 24 * 3600));
            } else{
                days = 0;
            }

            var hours = parseInt(seconds / 3600);
            if (hours > 0){
                seconds = parseInt(seconds % (hours * 3600));
            } else {
                hours = 0;
            }

            var minutes = parseInt(seconds / 60);
            if (minutes > 0){
				seconds = parseInt(seconds % 60);
            } else {
                minutes = 0;
            }

            var run = years + " 年 " + days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
            $(".run_time").html(run);
        }

        function showAuto(){
            if (start_time > 0){
                update_run_time();
            }
        }
        setInterval(showAuto, 1000);
    })

</script>
{% block my_js %}

{% endblock %}

</body>
</html>
